<!--
 * @Description: 
 * @Date: 2020-12-18 09:43:50
 * @LastEditors: lother
 * @LastEditTime: 2020-12-28 16:13:11
 * @FilePath: \AccountOpening-H5\src\components\page\k-switch.vue
-->
<template>
        <van-field name="checkbox" :rules="rulesList" class="noBorder">
            <template #input>
                <van-checkbox v-model="checkbox"  >
                     <div v-html="$backTitle(list['title_'+langSuff])"></div>
                    <template #icon="props">
                        <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
                    </template>
                </van-checkbox>
            </template>
        </van-field>
</template>
<script>
export default {
    name:"k-switch",
    props:{
        val:{
            type:Boolean,
            default:false
        },
        list:{
            type:Object,
            default:()=>{}
        }
    },
    computed:{
        required(){
            var boll = (this.list?.is_require)?true:false
            return boll
        },
        langSuff(){
            return this.$store.state.langSuff
        },
        rulesList(){
            var arr=[]
            if(this.list?.is_require){
                arr.push({ required: true, message: this.$t('page.k-switch.56390fiproo0')})
            }
            var rules  = this.list?.rule ?? [];
            for (let index = 0; index < rules.length; index++) {
                const item = rules[index];
                 if(item.rule!==''){
                    arr.push({pattern:this.evalreg(item.rule) , message : item['error_tip_'+this.langSuff]})
                }
            }
            return arr
        }
    },
    data() {
        return {
            checkbox:false,
            activeIcon:  require('@/assets/img/icon_gx.png'),
            inactiveIcon:require('@/assets/img/icon_bgx.png') ,
        }
    },
    methods:{
    },
    created(){
        this.checkbox = this.val ??false
    },
    watch:{
        checkbox(val,old){
            this.$emit('update:val',val)
        }
    }
    
}
</script>
<style lang="less" scoped>
    .van-cell{
        padding :0;
        padding-top: 0.15rem;
    }
    @{deep}.van-checkbox{
        align-items:flex-start;
        .van-checkbox__icon{
            max-width: 0.28rem;
            display: flex;
            align-items: center;
           img{
               width: 100%;
           }
        }
    }
</style>